<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webssh</title>
    <link rel="icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/bootstrap/3.3.7/bootstrap.min.css"/>
    <!-- xterm v4 版本后去掉了 zmodem 插件，只能直接使用 zmodem.js 实现，但是不知道什么原因，登陆 webssh 后，第一次输出命令
    回车后会卡顿一下才出数据，v3.14.5 就不会卡顿，v3.14.5还可以也可以直接使用 zmodem.js，所以这里使用 v3.14.5，终端功能方面
    v3 和 v4 我没发现有什么多大的差别
    -->
    <!--link rel="stylesheet" href="/static/xterm/4.4.0/xterm.css"/-->
    <link rel="stylesheet" href="/static/xterm/3.14.5/xterm.min.css"/>
    <style>
        .input-width {
            width: 20%;
            display: inline-block;
        }

        .hide {
            display: none;
        }
    </style>
	
	<script>
		function checkwindow() {
			event.returnValue=false;
		}
	</script>
	
</head>
<!--body onbeforeunload="checkwindow()"-->
<body>

<div style="margin-top: 10px" id="form">
    <form class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label class="col-sm-2 control-label">主机地址</label>
            <div class="col-sm-10">
                <input type="text" class="input-width form-control" id="host" placeholder="host" value="192.168.223.111">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">端口</label>
            <div class="col-sm-10">
                <input type="text" class="input-width form-control" id="port" value="22">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="input-width form-control" id="user" placeholder="user" value="root">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">认证类型</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="auth" id="inlineRadio1" value="pwd" checked> 密码认证
                </label>
                <label class="radio-inline">
                    <input type="radio" name="auth" id="inlineRadio2" value="key"> 秘钥认证
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="input-width form-control" id="password" placeholder="password" value="123456">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">秘钥文件</label>
            <div class="col-sm-10">
                <input type="file" id="pkey">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span id="helpBlock" class="help-block">
                   注意:
                    <p style="color: red">1、当认证类型为密码认证时, 秘钥输入框的内容将被忽略</p>
                    <p style="color: red">2、当认证类型为秘钥认证时, 如果密码输入框不为空, 则密码输入框的内容将作为秘钥的解密密码</p>
                </span>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="websocket()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                </button>
            </div>
        </div>
    </form>
</div>

<div id="django-webssh-terminal" class="hide">
    <div id="terminal"></div>
</div>


<script src="/static/jquery/3.4.1/jquery.min.js"></script>
<script src="/static/bootstrap/3.3.7/bootstrap.min.js"></script>
<script src="/static/bootbox/5.4.0/bootbox.min.js"></script>
<!--script src="/static/xterm/4.4.0/xterm.min.js"></script-->
<script src="/static/xterm/3.14.5/xterm.min.js"></script>
<script src="/static/zmodem/zmodem.devel.js"></script>
<script src="/static/webssh.js"></script>

</body>
</html>